<div class="pad-def bg-default bor-b-def">
  <h2 class="no-margin">基本信息</h2>
</div>
<div class="">
  <div class="wrapper-md bg-white">
    <form class="form-horizontal over-hide clearfix pad-def  bor-def mar-b-def">
      <div class="form-group col-lg-4 col-sm-6 col-xs-12 ">
        <label class="control-label col-xs-12 col-sm-3">学号：</label>
        <div class="col-xs-12 col-sm-9">
          <input class="form-control" placeholder="学号关键字"
                 [(ngModel)]="searchParams.studentId" name="studentId"/>
        </div>
      </div>
      <div class="form-group col-lg-4 col-sm-6 col-xs-12">
        <label class="control-label col-xs-12 col-sm-3 ">姓名：</label>
        <div class="col-xs-12 col-sm-9 ">
          <input class="form-control" placeholder="姓名关键字"
                 [(ngModel)]="searchParams.studentName" name="studentName"/>
        </div>
      </div>
      <div class="form-group col-lg-4 col-sm-6 col-xs-12">
        <label class="control-label col-xs-12 col-sm-3">性别：</label>
        <div class="col-xs-12 col-sm-9">
          <select class="form-control"
                  [(ngModel)]="searchParams.gender" name="gender">
            <option value="">不限</option>
            <option value="男">男</option>
            <option value="女">女</option>
          </select>
        </div>
      </div>
      <div class="form-group col-lg-4 col-sm-6 col-xs-12">
        <label class="control-label col-xs-12 col-sm-3">专业：</label>
        <div class="col-xs-12 col-sm-9 ">
          <select class="form-control" [(ngModel)]="searchParams.majorId" name="majorId">
            <option value="{{major.majorId}}" *ngFor="let major of majorOptions">{{major.major}}</option>
          </select>
        </div>
      </div>
      <div class="form-group col-lg-4 col-sm-6 col-xs-12">
        <label class="control-label col-xs-12 col-sm-3"
        >年级：</label>
        <div class="col-xs-12 col-sm-9">
          <select class="form-control" [(ngModel)]="searchParams.gradeId" name="grade">
            <option value="{{grade.gradeId}}" *ngFor="let grade of gradeOptions">{{grade.name}}</option>
          </select>
        </div>
      </div>
      <div class="form-group col-lg-4 col-sm-6 col-xs-12">
        <label class="control-label col-xs-12 col-sm-3">地址：</label>
        <div class="col-xs-12 col-sm-9">
          <input class="form-control" placeholder="地址关键字"
                 [(ngModel)]="searchParams.address" name="address"/>
        </div>
      </div>
      <div class="form-group col-lg-4 col-sm-6 col-xs-12">
        <label class="control-label col-xs-12 col-sm-3">联系电话：</label>
        <div class="col-xs-12 col-sm-9">
          <input class="form-control" placeholder="联系电话关键字"
                 [(ngModel)]="searchParams.mobile" name="mobile"/>
        </div>
      </div>
      <div class="form-group col-lg-4 col-sm-6 col-xs-12">
        <label class="control-label col-xs-12 col-sm-3">家庭电话：</label>
        <div class="col-xs-12 col-sm-9">
          <input class="form-control" placeholder="家庭电话关键字"
                 [(ngModel)]="searchParams.homePhone" name="homePhone"/>
        </div>
      </div>
      <div class="form-group col-lg-4 col-sm-6 col-xs-12">

        <div class="col-xs-12 col-lg-9 col-sm-offset-3">
          <button class="btn btn-primary" (click)="search()">搜索</button>
          <button class="btn btn-default" (click)="resetParams()">重置</button>
        </div>
      </div>
    </form>
    <p-dataTable #dt [value]="tableData" scrollHeight="200px" emptyMessage="暂无数据">
      <p-header>
        <div class="ui-helper-clearfix text-left">
          <a class="btn btn-sm btn-info pull-left" (click)="showAddModal()"><i class="fa fa-plus-square"></i>添加</a>
          <a class="btn btn-sm btn-info pull-right" (click)="dt.exportCSV()"><i class="fa fa-file-o"></i>导出CSV</a>
        </div>
      </p-header>
      <p-column field="id" header="id"></p-column>
      <p-column field="studentId" header="学号"></p-column>
      <p-column field="name" header="姓名"></p-column>
      <p-column field="gender" header="性别"></p-column>
      <p-column field="major" header="专业"></p-column>
      <p-column field="gradeName" header="年级"></p-column>
      <p-column field="birthday" header="生日"></p-column>
      <p-column field="nation" header="民族"></p-column>
      <p-column field="address" header="地址"></p-column>
      <p-column field="mobile" header="联系电话"></p-column>
      <p-column field="homePhone" header="家庭电话"></p-column>
      <p-column styleClass="col-button text-center">
        <ng-template pTemplate="header">
          操作
        </ng-template>
        <ng-template let-info="rowData" pTemplate="body">
          <div class="btn-group" style="min-width: 120px">
            <button type="button" class="btn btn-xs btn-primary" (click)="showEditModal(info)">编辑</button>
            <button type="button" class="btn btn-xs  btn-danger" (click)="remove(info.id)">删除</button>
          </div>
        </ng-template>
      </p-column>
      <p-footer>
        <paginator *ngIf="page.count" [(index)]="page.pageIndex" [(pageSize)]="page.pageSize" [count]="page.count"
                   size="sm" (onChangePage)="query()"></paginator>
      </p-footer>
    </p-dataTable>
  </div>
</div>
<modal [(visible)]="modalAdd.visible" size="lg">
  <modal-header>
    <h4 class="modal-title">添加基本信息 </h4>
  </modal-header>
  <modal-body>
    <form class="form-horizontal">
      <div class="form-group col-sm-6">
        <label class="col-sm-2 control-label">学号：</label>
        <div class="col-sm-10">
          <input class="form-control" placeholder="学号" [(ngModel)]="modalAdd.data.studentId" name="studentId" />
        </div>
      </div>
      <div class="form-group col-sm-6">
        <label class="col-sm-2 control-label">姓名：</label>
        <div class="col-sm-10">
          <input class="form-control" placeholder="姓名" [(ngModel)]="modalAdd.data.name" name="name" />
        </div>
      </div>
      <div class="form-group col-sm-6">
        <label class="col-sm-2 control-label">性别：</label>
        <div class="col-sm-10">
          <select class="form-control" [(ngModel)]="modalAdd.data.gender" name="gender" >
            <option value="男">男</option>
            <option value="女">女</option>
          </select>
        </div>
      </div>
      <div class="form-group col-sm-6">
        <label class="col-sm-2 control-label">年级：</label>
        <div class="col-sm-10">
          <select class="form-control" [(ngModel)]="modalAdd.data.gradeId" name="gradeId">
            <option *ngFor="let grade of modalAdd.gradeOptions" value="{{grade.gradeId}}">{{grade.name}}</option>
          </select>
        </div>
      </div>

      <div class="clearfix">
        <div class="form-group col-sm-6">
          <label class="col-sm-2 control-label">专业：</label>
          <div class="col-sm-10">
            <select class="form-control" [(ngModel)]="modalAdd.data.majorId" name="majorId">
              <option *ngFor="let major of modalAdd.majorOptions" value="{{major.majorId}}">{{major.major}}</option>
            </select>
          </div>
        </div>
        <div class="form-group col-sm-6">
          <label class="col-sm-2 control-label">生日：</label>
          <div class="col-sm-10">
            <input datePicker opt-format="YYYY/MM/DD" placeholder="生日"
                   class="form-control" [(ngModel)]="modalAdd.data.birthday" name="birthday" />
          </div>
        </div>
      </div>
      <div class="clearfix">
        <div class="form-group col-sm-6">
          <label class="col-sm-2 control-label">民族：</label>
          <div class="col-sm-10">
            <select class="form-control" [(ngModel)]="modalAdd.data.nationId" name="nationId">
              <option *ngFor="let nation of modalAdd.nationOptions" value="{{nation.nationId}}">{{nation.nation}}</option>
            </select>
          </div>
        </div>
      </div>
      <div class="form-group col-sm-6">
        <label class="col-sm-2 control-label">电话：</label>
        <div class="col-sm-10">
          <input class="form-control" placeholder="联系电话" [(ngModel)]="modalAdd.data.mobile" name="mobile" />
        </div>
      </div>
      <div class="form-group col-sm-6">
        <label class="col-sm-3 control-label">家庭电话：</label>
        <div class="col-sm-9">
          <input class="form-control" placeholder="家庭电话"  [(ngModel)]="modalAdd.data.homePhone" name="homePhone" />
        </div>
      </div>
      <div class="form-group col-xs-12">
        <label class="col-sm-1 control-label">地址：</label>
        <div class="col-sm-11">
          <input class="form-control" placeholder="家庭地址" [(ngModel)]="modalAdd.data.address" name="address" />
        </div>
      </div>
    </form>
  </modal-body>
  <modal-footer>
    <button class="btn btn-primary" (click)="add()" [disabled]="modalAdd.submitted">{{modalAdd.submitted?'正在提交...':'提交'}}</button>
    <button class="btn btn-default" (click)="closeAddModal()">关闭</button>

  </modal-footer>
</modal>
<modal [(visible)]="modalEdit.visible" size="lg">
  <modal-header>
    <h4 class="modal-title">编辑基本信息 </h4>
  </modal-header>
  <modal-body>
    <form class="form-horizontal">
      <div class="form-group col-sm-6">
        <label class="col-sm-2 control-label">学号：</label>
        <div class="col-sm-10">
          <input class="form-control" placeholder="学号" [(ngModel)]="modalEdit.data.studentId" name="studentId" [disabled]="true" />
        </div>
      </div>
      <div class="form-group col-sm-6">
        <label class="col-sm-2 control-label">姓名：</label>
        <div class="col-sm-10">
          <input class="form-control" placeholder="姓名" [(ngModel)]="modalEdit.data.name" name="name" />
        </div>
      </div>
      <div class="form-group col-sm-6">
        <label class="col-sm-2 control-label">性别：</label>
        <div class="col-sm-10">
          <select class="form-control" [(ngModel)]="modalEdit.data.gender" name="gender" >
            <option value="男">男</option>
            <option value="女">女</option>
          </select>
        </div>
      </div>
      <div class="form-group col-sm-6">
        <label class="col-sm-2 control-label">年级：</label>
        <div class="col-sm-10">
          <select class="form-control" [(ngModel)]="modalEdit.data.gradeId" name="gradeId">
            <option *ngFor="let grade of modalEdit.gradeOptions" value="{{grade.gradeId}}">{{grade.name}}</option>
          </select>
        </div>
      </div>
      <div class="form-group col-sm-6">
        <label class="col-sm-2 control-label">专业：</label>
        <div class="col-sm-10">
          <select class="form-control" [(ngModel)]="modalEdit.data.majorId" name="majorId">
            <option *ngFor="let major of modalEdit.majorOptions" value="{{major.majorId}}">{{major.major}}</option>
          </select>
        </div>
      </div>
      <div class="form-group col-sm-6">
        <label class="col-sm-2 control-label">生日：</label>
        <div class="col-sm-10">
          <input datePicker opt-format="YYYY/MM/DD" placeholder="生日"
                 class="form-control" [(ngModel)]="modalEdit.data.birthday" name="birthday" />
        </div>
      </div>
      <div class="clearfix">
        <div class="form-group col-sm-6">
          <label class="col-sm-2 control-label">民族：</label>
          <div class="col-sm-10">
            <select class="form-control" [(ngModel)]="modalEdit.data.nationId" name="nationId">
              <option *ngFor="let nation of modalEdit.nationOptions" value="{{nation.nationId}}">{{nation.nation}}</option>
            </select>
          </div>
        </div>
      </div>
      <div class="form-group col-sm-6">
        <label class="col-sm-2 control-label">电话：</label>
        <div class="col-sm-10">
          <input class="form-control" placeholder="联系电话" [(ngModel)]="modalEdit.data.mobile" name="mobile" />
        </div>
      </div>
      <div class="form-group col-sm-6">
        <label class="col-sm-3 control-label">家庭电话：</label>
        <div class="col-sm-9">
          <input class="form-control" placeholder="家庭电话"  [(ngModel)]="modalEdit.data.homePhone" name="homePhone" />
        </div>
      </div>
      <div class="form-group col-xs-12">
        <label class="col-sm-1 control-label">地址：</label>
        <div class="col-sm-11">
          <input class="form-control" placeholder="家庭地址" [(ngModel)]="modalEdit.data.address" name="address" />
        </div>
      </div>
    </form>
  </modal-body>
  <modal-footer>
    <button class="btn btn-primary" (click)="update()" [disabled]="modalEdit.submitted">{{modalEdit.submitted?'正在提交...':'提交'}}</button>
    <button class="btn btn-default" (click)="closeEditModal()">关闭</button>

  </modal-footer>
</modal>
